﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Unconstrained Layout</title>
    <style>
        
@import url(../style.css);
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .8;
}

</style>
</head>
<body>
    <a href="../index.html">cola.js home</a>
    <h1>Unconstrained graph layout</h1>
    <script src="../cola.min.js"></script>
<script src="../extern/d3v4.js"></script>
<script>
    var width = 960,
        height = 500;

    var color = d3.scaleOrdinal(d3.schemeCategory20);

    var cola = cola.d3adaptor(d3)
        .size([width, height]);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    d3.json("graphdata/chris.json", function (error, graph) {
        cola
            .nodes(graph.nodes)
            .links(graph.links)
            .symmetricDiffLinkLengths(5)
            .start(30);

        var link = svg.selectAll(".link")
            .data(graph.links)
          .enter().append("line")
            .attr("class", "link")
            .style("stroke-width", function (d) { return Math.sqrt(d.value); });

        var node = svg.selectAll(".node")
            .data(graph.nodes)
          .enter().append("circle")
            .attr("class", "node")
            .attr("r", 5)
            .style("fill", function (d) { return color(d.group); })
            .on("click", function (d) {
                d.fixed = true;
            })
            .call(cola.drag);

        node.append("title")
            .text(function (d) { return d.name; });

        cola.on("tick", function () {
            link.attr("x1", function (d) { return d.source.x; })
                .attr("y1", function (d) { return d.source.y; })
                .attr("x2", function (d) { return d.target.x; })
                .attr("y2", function (d) { return d.target.y; });

            node.attr("cx", function (d) { return d.x; })
                .attr("cy", function (d) { return d.y; });
        });
    });

</script>
    <p>There are no constraints in this graph.  This is what happens if you use CoLa as a drop-in replacement for d3 Force layout.
        You should notice that compared to D3 Force layout, CoLa has much nicer convergence properties.  That is, it glides smoothly
        to a local minimum in the layout objective function with no "jitter".</p>
    <p>To be precise, it monotonically reduces the "stress" of the layout.
    It also does a noticably better job of finding a layout in which the edges are closer to their ideal lengths.  In this case, you will notice that
        the edges are fairly uniform in length (since they are all using the default ideal length).
    </p>
    <p>Compare to <a href="downwardedges.html">this constrained version</a> of the same graph.</p>
    <p>Here's <a href="3dtree.html">a 3D version</a> of the same graph!</p>
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-63535113-1', 'auto');
  ga('send', 'pageview');

    </script>
</body>
</html>
